<template>
  <div>
    <!-- 题型标题 -->
    <h1>三、问答题</h1>
    <!-- 题目描述区域 -->
    <p style="font-size: 0.45rem;line-height: 200%;">
      <span style="font-size: 0.6rem;font-weight: bold;">{{ questionParam.qidx + 1 }}.</span>
      {{ questionData.title }}
    </p>
    <!-- 回答区域 -->
    <div style="line-height: 200%;font-size: 0.45rem;margin-top: 0.5rem;">
      <van-form :readonly="!editable">
        <van-field
          v-model="answerData"
          :rows="10"
          :autosize="{ maxHeight: 480, minHeight: 200 }"
          label="答案"
          type="textarea"
          placeholder="请输入答案..."
        />
      </van-form>
    </div>
  </div>
</template>

<script>
import { Field, Form } from 'vant'

export default {
  name: 'AnswerQuestion',
  components: {
    [Field.name]: Field,
    [Form.name]: Form
  },
  props: {
    questionData: {
      type: Object, require: true, default: () => { return {} }
    },
    submitData: {
      type: Object, require: true, default: () => { return {} }
    },
    questionParam: {
      type: Object, require: true, default: () => { return {} }
    },
    editable: {
      type: Boolean, require: false, default: false
    }
  },
  data () {
    return {
      answerData: ''
    }
  },
  computed: {

  },
  watch: {
    answerData (val) {
      this.submitData.content = val
    }
  },
  created () {
    this.refreshData()
  },
  methods: {
    refreshData () {
      setTimeout(() => {
        // 初始化问答题表单数据
        if (this.submitData) {
          this.answerData = this.submitData.content
        }
      }, 0)
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .van-field__label {
  width: 1rem;
}
</style>
